<template>
	<div>
		<el-form :inline="true" size="mini">
			<el-form-item>
				<el-input v-model="keyword" placeholder="请输入用户名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryUser">查询用户</el-button>
				<el-button type="primary" @click="addUser()">新增用户</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="pageInfo.list" style="100%">
			<el-table-column type="selection"></el-table-column>
			<el-table-column label="用户编号" prop="id" width="100"></el-table-column>
			<el-table-column label="用户名称" prop="username" width="100"></el-table-column>
			<el-table-column label="用户权限" prop="userlv" width="100"></el-table-column>
			<el-table-column label="用户状态" prop="disable" width="100"></el-table-column>
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<template>
						<el-button @click="updateUser(scope)" size="mini">编辑</el-button>
						<el-button size="mini" @click="deleteUser(scope)">删除</el-button>
					</template>					
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			layout="prev,pager,next,total,jumper,sizes"			
			:total="pageInfo.total"
			:page-size="pageInfo.pageSize"
			:page-count="pageInfo.navigatePages"
			:page-sizes="[5,10,15,20]"
			:current-page="pageInfo.pageNum"
			background
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		
		<el-dialog :visible.sync="updateUsers"  title="修改用户信息" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="用户名称">
					<el-input v-model="type.username" placeholder="用户名称"></el-input>
				</el-form-item>
				<el-form-item label="用户权限">
					<el-select placeholder="用户权限" v-model="type.userlv">
						<el-option 
							v-for="item in userlvs"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户状态">
					<el-select placeholder="用户状态" v-model="type.disable">
						<el-option
							v-for="item in disables"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button @click="userUpdate()" type="primary">保存</el-button>
					<el-button @click="updateUsers=false" type="warning">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog :visible.sync="addUsers"  title="新增用户信息" center>
			<el-form>
				<el-form-item label="用户名称">
					<el-input v-model="type.username" placeholder="用户名称"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="type.password" placeholder="密码" type="password"></el-input>
				</el-form-item>
				<el-form-item label="用户联系方式">
					<el-input v-model="type.phone" placeholder="用户联系方式"></el-input>
				</el-form-item>
				<el-form-item label="用户邮箱">
					<el-input v-model="type.mailbox" placeholder="用户邮箱"></el-input>
				</el-form-item>
				<el-form-item label="工作岗位">
					<el-input v-model="type.job" placeholder="工作岗位"></el-input>
				</el-form-item>
				<el-form-item label="用户权限">
					<el-select placeholder="用户权限" v-model="type.userlv">
						<el-option 
							v-for="item in userlvs"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户状态">
					<el-select placeholder="用户状态" v-model="type.disable">
						<el-option
							v-for="item in disables"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-form>
				<el-form-item>
					<el-button type="primary" @click="insetruser()">新增用户</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				pageInfo:{
				},
				keyword:"",
				updateUsers:false,
				addUsers:false,
				type:{},
				userlvs:[
					{id:0,name:"管理员"},
					{id:1,name:"普通用户"}
				],
				disables:[
					{id:0,name:"禁用"},
					{id:1,name:"可用"},
				],
				ids:{}
			}
		},
		created() {
			this.showData(1,3,this.keyword);
			
		},
		methods:{
			showData(pageNum,pageSize,keyword){
				let url = "user/getPaged";
				let params = `pageNum=${pageNum}&pageSize=${pageSize}&keyword=${keyword}`;
				axios.post(url,params).then(resp=>{
					this.pageInfo = resp.data.data;
					
					for(let i = 0;i<this.pageInfo.list.length;i++){
						if(this.pageInfo.list[i].userlv == 0){
							this.pageInfo.list[i].userlv = "管理员";
						}else if(this.pageInfo.list[i].userlv == 1){
							this.pageInfo.list[i].userlv = "普通用户";
						}
					}
					for(let i = 0;i<this.pageInfo.list.length;i++){
						if(this.pageInfo.list[i].disable == 0){
							this.pageInfo.list[i].disable = "禁用";
						}else if(this.pageInfo.list[i].disable == 1){
							this.pageInfo.list[i].disable = "可用";
						}
					}
					//console.log(this.pageInfo.list[0].userlv);
					// console.log(this.pageInfo);
				});
			},
			handleCurrentChange(pageNum){
				this.showData(pageNum,this.pageInfo.pageSize,this.keyword);
			},
			handleSizeChange(pageSize){
				this.showData(1,pageSize,this.keyword);
				this.pageInfo.pageSize = pageSize;
			},
			queryUser(){
				this.showData(1,this.pageInfo.pageSize,this.keyword);
			},
			deleteUser(scope){
				this.$confirm("是否删除","提示").then(()=>{
					let url = "user/delete";
					axios.post(url,`id=${scope.row.id}`).then(resp=>{
						if(resp.data.data == 1){
							this.$alert("删除成功！");
							this.showData(1,this.pageInfo.pageSize,this.keyword)
						}
					});
				}).catch(()=>{
					console.log("cancel");
				});
			},
			userUpdate(scope){
				let url = "user/update";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){	
						this.$alert("修改成功");
						this.updateUsers = false;
						this.ids.shortname = this.type.shortname;
						this.ids.langname = this.type.langname;
						this.ids.headapp = this.type.headapp;
						this.ids.headname = this.type.headname;
						this.ids.phone = this.type.phone;
						this.ids.fax = this.type.fax;
						this.ids.mobilephone = this.type.mobilephone;
						this.ids.suppileraddress = this.type.suppileraddress;
						this.ids.factoryaddress = this.type.factoryaddress;
						this.ids.lastbuydate = this.type.lastbuydate;
					}
				});
			},
			updateUser(scope){
				this.updateUsers = true;
				this.ids = scope.row;
				// console.log(scope.$index,scope.row);
				this.$set(scope.row,"edit",true);
				//对象克隆
				this.type = {...scope.row};
			},
			addUser(){
				this.addUsers = true;
			},
			insetruser(){
				let url = "user/insert";
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){
						this.addUsers = false;
					}else{
						alert("添加失败")
					}
				})
			}
		}
	}
</script>

<style>
</style>
